<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/register-style.css">
    <!--    加载动画 css 文件-->
    <link rel="stylesheet" href="/css/pageLoading.css">
</head>
<body>
    <!-- 加载动画 -->
    <div class="loader loader-div">
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>

    <div class="container" >


        <div class="row row-content" >

            <form class="col-xl-3 offset-xl-4  col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-8 offset-2 col-content" action="/userRegister" method="post">

                <div class="row row-child">
                    <input type="text" class="input-text " id="id" name="userId" placeholder="用户名" required>
                </div>

                <div class="row row-child ">
                    <input type="password" class="input-text pwd-1" id="pwd" name="userPwd" placeholder="密码" required>
                </div>

                <div class="row row-child ">
                    <input type="password" class="input-text pwd-2" id="pwd2" name="userPwd2" placeholder="确认密码" required>
                </div>

                <div class="row row-child" style="position: relative">
                    <span class="placeholder-error-pwd" style="position: absolute;color: red;transform: translateY(-150%)">两个密码不一致！</span>
                    <input type="text" class="input-text " id="qq" name="userQq" placeholder="QQ账号" required>
                </div>

                <div class="row row-child">
                    <input type="text" class="col-md-7 input-text" id="code" name="code" placeholder="验证码" required>
                    <input type="button" class="col-md-4 offset-md-1 btn-get" value="获取验证码">
                    <span class="count-down col-md-4 offset-md-1"></span>
                </div>

                <div class="row row-child">
                    <input type="submit" class="input-text btn" required value="注册">
                </div>

                <div class="row row-child" style="margin-top: -2rem">
                    <span class="col-md-6" style="text-align: right;padding: 0">已有账号|
                    </span><a href="/login" class="col-md-6" style="text-align: left;padding: 0">登录</a>
                </div>

            </form>


        </div>


    </div>

<script src="/js/jQuery.js"></script>
<script src="/js/register.js"></script>
<!--    加载动画-->
<script src="/js/pageLoading.js"></script>
<script th:inline="javascript">
    $(function (){
        let codeError = [[${codeError}]];
        if (codeError == 1){
            alert("验证码错误！");
        }

        timer1 = setInterval(function (){
            let pwd1 = $('.pwd-1').val().toString().trim();
            let pwd2 = $('.pwd-2').val().toString().trim();
            if (pwd1 != null && pwd2 != null){
                // alert("jlsjflk");
                if (pwd1 == pwd2){
                    $('.placeholder-error-pwd').css('display', 'none');
                }else {
                    $('.placeholder-error-pwd').css('display', 'inline-block');
                }
            }
        })
    })
</script>
</body>
</html>